<template>
  <div class="app-container home">
    <el-divider />
    <el-row :gutter="24" v-if="isShowTop">
      <el-col :xs="24" :sm="24" :md="8" :lg="8">
        
        <el-card class="update-log" style="height: 433px;">
          <div class="index-count">
            <h1>欢迎来到重财教务系统</h1>  
            <div class="user-info">  
            <h2>学生总数量</h2>  
    <span class="user-count">{{ studentCount.totalNum }}</span>  
    <h2>当前在校学生数量</h2>  
    <span class="current-user">{{ studentCount.currNum }}</span>  
  </div>  
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="8" :lg="8">
        <el-card class="update-log">

           <!-- <div id = "roleReport"></div> -->
           <div style="height: 400px;">
            <RolePie></RolePie>
           </div>
        </el-card>
      
      </el-col>
      <el-col :xs="24" :sm="24" :md="8" :lg="8">
        <el-card class="update-log">
          <div style="height: 400px;">
            <StuYearBar></StuYearBar>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :xs="24" :sm="24" :md="12" :lg="12">
        <el-card class="update-log">
          <div slot="header" class="clearfix box">
            <span>通知</span>
            <span style="position: absolute; right: 0;"><a @click="handleLoadMore(1)">更多>></a></span>
          </div>
          <div class="body">
            <ul class="ui-list" style="height: 400px;">
              <li class="ui-list-item" v-for="(item, index) in noticeList" :key="index">
                <span class="ui-list-item-text"><a @click="toNotice(item.noticeId)"><span style="color: red;">【通知】</span>{{ item.noticeTitle }} </a></span>
                <span class="ui-list-item-text">{{ item.createTime }}</span>
              </li>
            </ul>
          </div>
        </el-card>
      </el-col>
      <!-- 展示更多的公告或者通知 -->
      <el-dialog :title="moreNoticeTitle" :visible.sync="moreNoticeOpen" width="880px" append-to-body center>
        <el-table v-loading="noticeLoading" :data="noticeMoreList" style="width: 100%">
          <el-table-column label="序号" align="center" width="100" type="index" />
          <el-table-column label="公告" align="center" prop="noticeTitle" :show-overflow-tooltip="true" width="500">
            <template slot-scope="scope">
              <a @click="toNotice(scope.row.noticeId)">
                <span style="color:red;">【{{moreNoticeTitle}}】</span>
                <span>{{scope.row.noticeTitle}}</span>
              </a>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" align="center" prop="createTime" width="200">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
        </el-table>

        <pagination v-show="noticeTotal>0" :total="noticeTotal" :page.sync="noticeQueryParams.pageNum" :limit.sync="noticeQueryParams.pageSize" @pagination="getMoreNoticeList" />
      </el-dialog>
      <!-- 展示更多的文件 -->
      <el-dialog :title="moreFileTitle" :visible.sync="moreFileOpen" width="880px" append-to-body center>
        <el-table v-loading="FileLoading" :data="fileMoreList">
          <el-table-column label="序号" align="center" width="100" type="index" />
          <el-table-column label="文件" align="center" prop="noticeTitle" :show-overflow-tooltip="true" width="500">
            <template slot-scope="scope">
              <span style="color:red;">【文件】</span>
              <span style="color:blue"><a @click="downloadFile(scope.row)">{{scope.row.name}}</a></span>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" align="center" prop="createTime" width="100">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="fileTotal>0" :total="fileTotal" :page.sync="fileQueryParams.pageNum" :limit.sync="fileQueryParams.pageSize" @pagination="getMoreFileList" />
      </el-dialog>
      <!-- 展示通知公告dialog -->
      <el-dialog :title="noticeTitle" :visible.sync="noticeOpen" width="1000px" append-to-body center>
        <div style="margin-left: 30px;text-align: center;">
          <h4><b>{{ noticeDetail.noticeTitle }}</b></h4>
          <p>发布人：{{noticeDetail.createBy}} <span style="margin-left: 20px;">发布时间：{{noticeDetail.createTime}}</span></p>
        </div>
        <div class="ql-container ql-snow">
          <div class="ql-editor">
            <div v-html="noticeDetail.noticeContent"></div>
          </div>
        </div>
        <div slot="footer" class="dialog-footer">
          <!-- <el-button type="primary" @click="submitForm">确 定</el-button> -->
          <!-- <el-button @click="cancel">取 消</el-button> -->
        </div>
      </el-dialog>
      <el-col :xs="24" :sm="24" :md="12" :lg="12">
        <el-card class="update-log">
          <div slot="header" class="clearfix box">
            <span>公告</span>
            <span style="position: absolute; right: 0;"><a @click="handleLoadMore(2)">更多>></a></span>
          </div>
          <div class="body">
            <ul class="ui-list" style="height: 400px;">
              <li class="ui-list-item" v-for="(item, index) in announcementList" :key="index">
                <span class="ui-list-item-text"><a @click="toNotice(item.noticeId)"><span style="color: red;">【公告】</span>{{ item.noticeTitle }}</a> </span>
                <span class="ui-list-item-text">{{ item.createTime }}</span>
              </li>
            </ul>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="24" v-if="isShowBelow">
      <el-col :xs="24" :sm="24" :md="10" :lg="10">
        <el-card class="update-log">
          <div slot="header" class="clearfix box">
            <span>文件</span>
            <span style="position: absolute; right: 0;"><a @click="handleLoadFileMore()">更多>></a></span>
          </div>
          <div class="body">
            <ul class="ui-list" style="height: 400px;">
              <li class="ui-list-item" v-for="(item, index) in fileList" :key="index">
                <span class="ui-list-item-text"><a @click="downloadFile(item)" style="color:blue"><span style="color: red;">【文件】</span>{{ item.name }} </a></span>
                <span class="ui-list-item-text">{{ item.createTime }}</span>
              </li>
            </ul>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="7" :lg="7">
        <el-card class="update-log">
          <div slot="header" class="clearfix box">
            <span>课表</span>
            <span style="position: absolute; right: 0;"><a @click="handleLoadCouMore()">更多>></a></span>
          </div>
          <div class="body">
            <ul class="ui-list" style="height: 400px;">
              <li class="ui-list-item" v-for="(item, index) in couList" :key="index">
                <span class="ui-list-item-text">{{ item.week+'周-'+item.section+'节-星期'+getDay(item.day)+'-'+item.courseName+'-'+item.roomName+'-'+getTeacherOrClassName(item)}}</span>
                <!-- <span class="ui-list-item-text">{{ item.createTime }}</span> -->
              </li>
            </ul>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="7" :lg="7">
        <el-card class="update-log">
          <div slot="header" class="clearfix box">
            <span>成绩</span>
            <span style="position: absolute; right: 0;"><a @click="handleLoadScoreMore()">更多>></a></span>
          </div>
          <div class="body">
            <ul class="ui-list" style="height: 400px;">
              <li class="ui-list-item" v-for="(item, index) in scoreList" :key="index">
                <span class="ui-list-item-text">{{ item.year+'-'+item.semester+'-'+getTeacherOrStudentName(item)+'-'+item.courseName }}</span>
                <span class="ui-list-item-text">{{ item.scoreNum }}</span>
              </li>
            </ul>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Quill from "quill";
import RolePie from "@/views/dashboard/RolePie"
import StuYearBar from "@/views/dashboard/StuYearBar"
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { getAnnouncementList, getNoticeList, getNotice, listNotice } from "@/api/system/notice";
import { listTop10, listFile } from "@/api/edu/file";
import {listStudentScore,listTeacherScore} from "@/api/edu/score";
import {listByUserId} from "@/api/edu/sch";
import { allCount } from "@/api/edu/student";
import * as echarts from 'echarts';
export default {
  name: "Index",
  data () {
    return {
      // 版本号
      version: "3.6.3",
      noticeList: [],
      announcementList: [],
      noticeOpen: false,
      noticeDetail: {},
      noticeTitle: "",
      moreNoticeTitle: "",
      //通知查询参数
      noticeQueryParams: {
        noticeType: 1,
        pageNum: 1,
        pageSize: 10
      },
      //文件查询参数
      fileQueryParams: {
        pageNum: 1,
        pageSize: 10
      },
      studentCount:{
        totalNum:0,
        currNum:0
      },
      isShowTop:false,
      isShowBelow:false,
      fileList: [],
      moreNoticeOpen: false,
      moreFileTitle: "文件列表",
      moreFileOpen: false,
      noticeLoading: false,
      FileLoading: false,
      noticeMoreList: [],
      fileMoreList: [],
      noticeTotal: 0,
      fileTotal: 0,
      scoreList:[],
      couList:[]  //课表
    };
  },
  components:{RolePie,StuYearBar},
  created () {
    
    if(this.$auth.hasRoleOr(["admin", "sysytem","counsellor"])){
      this.isShowTop = true
      this.getAllCount()
    }
    this.getNoticeList()
      this.getAnnouncementList()
    if(this.$auth.hasRoleOr(["admin", "teacher","student"])){
      this.isShowBelow = true
      this.getFileList()
    this.getScoreListByStu()
    this.getCouList()
    }
    
    
    
  },
  mounted() {
    // this.getRoleNum()
  },
  methods: {
  //   isShowTop(){
  //     console.log("==isShowTop==",this.$auth.hasRoleOr(["admin", "sysytem","counsellor"]))
  //       return this.$auth.hasRoleOr(["admin", "sysytem","counsellor"]);
  //   },
  //   isShowBelow(){
  //     console.log("==isShowBelow==",this.$auth.hasRoleOr(["admin", "sysytem","counsellor"]))
  //       return this.$auth.hasRoleOr(["admin", "teacher","student"]);
  //     // return this.$auth.hasRole("admin") ||	this.$auth.hasRole("teacher") || this.$auth.hasRole("student")
  //  },
    getAllCount(){
        allCount().then(rep =>{
          this.studentCount.totalNum = rep.data
          this.studentCount.currNum = rep.currNum
        })
    },
    //获取文件后缀
    getFileExtension (filename) {
      return filename.split('.').pop();
    },
    getDay(day){
      if(day == 1){
        return '一'
      }else if(day == 2){
        return '二'
      }else if(day == 3){
        return '三'
      }else if(day == 4){
        return '四'
      }else if(day == 5){
        return '五'
      }else if(day == 6){
        return '六'
      }else if(day == 7){
        return '天'
      }else{
        return ''
      }
    },
    getTeacherOrClassName(cou){
      if(this.$auth.hasRole("student")){
          return cou.teacherName
      }

      if(this.$auth.hasRole("teacher")){
        return cou.className
      }
    },

    getTeacherOrStudentName(score){
      if(this.$auth.hasRole("student")){
          return score.teacherName
      }

      if(this.$auth.hasRole("teacher")){
        return score.className+"-"+score.studentName
      }
    },
    //获取文件后缀
    getFileName (path) {
      return path.split('/').pop();
    },
    goTarget (href) {
      window.open(href, "_blank");
    },
    getNoticeList () {
      getNoticeList().then(response => {
        this.noticeList = response.data;
      });
    },
    getFileList () {
      listTop10().then(response => {
        console.log(response)
        this.fileList = response.data;
      });
    },
    downloadFile (file) {
      let filename = this.getFileName(file.path)
      let fileExtension = this.getFileExtension(filename)
      this.$download.saveAs(file.path, file.name + "." + fileExtension);
    },
    getAnnouncementList () {
      getAnnouncementList().then(response => {
        this.announcementList = response.data;
      });
    },
    handleLoadMore (type) {
      this.noticeQueryParams.noticeType = type
      this.getMoreNoticeList()

      if (type == 1) {
        //通知
        this.moreNoticeTitle = "通知"
      } else {
        //公告
        this.moreNoticeTitle = "公告"
      }
    },
    handleLoadFileMore () {
      this.getMoreFileList()
    },
    //更多成绩，跳转到成绩查询页面
    handleLoadScoreMore(){
      if(this.$auth.hasRole("student")){
        this.$router.push("/edu/score/student")
      }else if(this.$auth.hasRole("teacher")){
        this.$router.push("/edu/score/teacherList")
      }else{
        this.$router.push("/edu/score/list")
      }
    
      
    },
    //更多课表，跳转到课表查询页面
    handleLoadCouMore(){
        this.$router.push("/edu/sc/stuedntSch")
    },
    //查询当前登录的成绩列表
    getScoreListByStu(){
      if(this.$auth.hasRole("student")){
        listStudentScore({pageNum:1,pageSize:10}).then(rep =>{
        console.log(rep)
         this.scoreList = rep.rows
      })
      }
      if(this.$auth.hasRole("teacher")){
        listTeacherScore({pageNum:1,pageSize:10}).then(rep =>{
         this.scoreList = rep.rows
      })
      }
    },
    /** 查询公告列表 */
    getMoreNoticeList () {
      this.noticeLoading = true;
      listNotice(this.noticeQueryParams).then(response => {
        this.noticeMoreList = response.rows;
        this.noticeTotal = response.total;
        this.noticeLoading = false;
        this.moreNoticeOpen = true;
      });
    },
    /** 查询文件列表 */
    getMoreFileList () {
      this.fileLoading = true;
      listFile({}).then(response => {
        this.fileMoreList = response.rows;
        this.fileTotal = response.total;
        this.fileLoading = false;
        this.moreFileOpen = true;
      });
    },
    //查询课程列表
    getCouList(){
      listByUserId({pageNum:1,pageSize:10}).then(rep =>{
        console.log(rep)
        this.couList = rep.rows;
      })
    },
    getNoticeDetail (noticeId) {
      getNotice(noticeId).then(response => {
        this.noticeDetail = response.data;
        this.noticeOpen = true
        if (this.noticeDetail.noticeType == '1') {
          this.noticeTitle = "通知详情"
        } else {
          this.noticeTitle = "公告详情"
        }

      });
    },
    toNotice (id) {
      this.getNoticeDetail(id)

    },
    // 取消按钮
    cancel () {
      this.open = false;
      this.noticeDetail = {}
      this.noticeTitle = ""
    }
  },

  

};
</script>

<style scoped lang="scss">
.box {
  position: relative;
}
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }

  /* 列表样式 */
  .ui-list {
    list-style: none;
    padding: 0;
  }

  .ui-list-item {
    display: flex;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #ddd;
    justify-content: space-between;
  }

  .ui-list-item:last-child {
    border-bottom: none;
  }

  /* 图标样式 */
  .ui-list-item-icon {
    margin-right: 10px;
    font-size: 24px;
    color: #999;
  }

  /* 文本样式 */
  .ui-list-item-text {
    font-size: 16px;
    color: #333;
  }

  .index-count h1 {  
      text-align: center;  
      color: #333;  
    }  
      
    .user-info {  
      margin-top: 20px;  
    }  
      
    .user-info h2 {  
      color: #666;  
    }  
      
    .user-count {  
      font-weight: bold;  
      color: #333;  
      font-size: 30px;
    }  
      
    .current-user {  
      font-weight: bold;  
      // color: #ff6347;  
      font-size: 30px;
    }  
}
</style>

